<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频图像质量增强系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>视频图像质量增强系统</h1>
    </header>
    <div class="container">
        <nav class="sidebar">
            <ul>
                <li><a href="#enhancement" class="active">图像/视频增强</a></li>
                <li><a href="#derain">去雨去雾</a></li>
                <li><a href="#detection">遮挡检测</a></li>
                <li><a href="#sceneChange">场景变更检测</a></li>
                <li><a href="#evaluation">图像/视频质量评价</a></li>
                <li><a href="#superResolution">超分辨率重建</a></li>
            </ul>
        </nav>
        <main>
            <section id="enhancement" class="active-section">
                <h2>图像/视频增强</h2>
                <p>通过先进的算法，提升图像和视频的清晰度和细节。</p>
                <div class="upload-area" id="uploadArea">
                    <input type="file" id="imageInput" accept="image/*,video/*" hidden>
                    <label for="imageInput" class="upload-button">
                        <span>选择文件或拖拽到此处</span>
                        <small>支持图片/视频格式</small>
                    </label>
                    <progress id="uploadProgress" value="0" max="100" style="display:none;"></progress>
                </div>
                <div class="parameter-settings">
                    <label for="sharpness">锐化程度:</label>
                    <input type="range" id="sharpness" name="sharpness" min="0" max="100" value="50">
                    <label for="contrast">对比度:</label>
                    <input type="range" id="contrast" name="contrast" min="0" max="100" value="50">
                </div>
                <div class="preview-area">
                    <div class="original">
                        <h3>原始文件</h3>
                        <div id="originalPreview"></div>
                    </div>
                    <div class="enhanced">
                        <h3>增强效果</h3>
                        <div id="enhancedPreview"></div>
                    </div>
                </div>
                <div class="control-panel">
                    <button onclick="enhanceImage()">增强模糊图像</button>
                    <button onclick="enhanceVideo()">增强视频清晰度</button>
                    <button onclick="pauseEnhancement()">暂停</button>
                    <button onclick="resumeEnhancement()">继续</button>
                    <button onclick="downloadEnhancedResult()">下载结果</button>
                </div>
                <progress id="enhancementProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
            </section>

            <section id="derain">
                <h2>去雨去雾</h2>
                <p>通过智能算法去除图像和视频中的雨滴和雾气。</p>
                <div class="upload-area" id="derainUploadArea">
                    <input type="file" id="derainInput" accept="image/*,video/*" hidden>
                    <label for="derainInput" class="upload-button">
                        <span>选择文件或拖拽到此处</span>
                        <small>支持图片/视频格式</small>
                    </label>
                    <progress id="derainUploadProgress" value="0" max="100" style="display:none;"></progress>
                </div>
                <div class="parameter-settings">
                    <label for="rainIntensity">去雨强度:</label>
                    <input type="range" id="rainIntensity" name="rainIntensity" min="0" max="100" value="50">
                    <label for="fogIntensity">去雾强度:</label>
                    <input type="range" id="fogIntensity" name="fogIntensity" min="0" max="100" value="50">
                </div>
                <div class="preview-area">
                    <div class="original">
                        <h3>原始文件</h3>
                        <div id="derainOriginalPreview"></div>
                    </div>
                    <div class="enhanced">
                        <h3>去雨去雾效果</h3>
                        <div id="derainEnhancedPreview"></div>
                    </div>
                </div>
                <div class="control-panel">
                    <button onclick="removeRain()">去雨处理</button>
                    <button onclick="removeFog()">去雾处理</button>
                    <button onclick="pauseProcessing()">暂停</button>
                    <button onclick="resumeProcessing()">继续</button>
                    <button onclick="downloadProcessedVideo()">下载结果</button>
                </div>
                <progress id="processingProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
            </section>

            <section id="detection">
                <h2>遮挡检测</h2>
                <p>通过智能算法检测视频中的遮挡情况，并标记遮挡区域。</p>
                <div class="upload-area" id="detectionUploadArea">
                    <input type="file" id="detectionInput" accept="image/*,video/*" hidden>
                    <label for="detectionInput" class="upload-button">
                        <span>选择文件或拖拽到此处</span>
                        <small>支持图片/视频格式</small>
                    </label>
                    <progress id="detectionUploadProgress" value="0" max="100" style="display:none;"></progress>
                </div>
                <div class="parameter-settings">
                    <label for="sensitivity">检测灵敏度:</label>
                    <input type="range" id="sensitivity" name="sensitivity" min="0" max="100" value="50">
                    <label for="threshold">遮挡阈值:</label>
                    <input type="range" id="threshold" name="threshold" min="0" max="100" value="30">
                </div>
                <div class="preview-area">
                    <div class="original">
                        <h3>原始文件</h3>
                        <div id="detectionOriginalPreview"></div>
                    </div>
                    <div class="enhanced">
                        <h3>检测结果</h3>
                        <div id="detectionResultPreview"></div>
                    </div>
                </div>
                <div class="detection-info">
                    <h3>检测信息</h3>
                    <div id="detectionStats">
                        <p>遮挡区域: <span id="occlusionArea">0%</span></p>
                        <p>遮挡持续时间: <span id="occlusionDuration">0秒</span></p>
                    </div>
                </div>
                <div class="control-panel">
                    <button onclick="startDetection()">开始检测</button>
                    <button onclick="pauseDetection()">暂停</button>
                    <button onclick="resumeDetection()">继续</button>
                    <button onclick="downloadDetectionResult()">下载结果</button>
                </div>
                <progress id="detectionProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
            </section>

            <section id="sceneChange">
                <h2>场景变更检测</h2>
                <p>通过智能算法检测视频中的场景变化，并标记变更时间点。</p>
                <div class="upload-area" id="sceneChangeUploadArea">
                    <input type="file" id="sceneChangeInput" accept="video/*" hidden>
                    <label for="sceneChangeInput" class="upload-button">
                        <span>选择文件或拖拽到此处</span>
                        <small>支持视频格式</small>
                    </label>
                    <progress id="sceneChangeUploadProgress" value="0" max="100" style="display:none;"></progress>
                </div>
                <div class="parameter-settings">
                    <label for="sceneThreshold">场景变化阈值:</label>
                    <input type="range" id="sceneThreshold" name="sceneThreshold" min="0" max="100" value="50">
                    <label for="minDuration">最小场景持续时间(秒):</label>
                    <input type="range" id="minDuration" name="minDuration" min="1" max="10" value="2">
                </div>
                <div class="preview-area">
                    <div class="original">
                        <h3>原始视频</h3>
                        <div id="sceneOriginalPreview"></div>
                    </div>
                    <div class="enhanced">
                        <h3>检测结果</h3>
                        <div id="sceneResultPreview"></div>
                    </div>
                </div>
                <div class="scene-info">
                    <h3>场景变更信息</h3>
                    <div id="sceneStats">
                        <p>场景数量: <span id="sceneCount">0</span></p>
                        <p>平均场景时长: <span id="avgSceneDuration">0秒</span></p>
                    </div>
                    <div id="sceneTimeline">
                        <h4>场景时间轴</h4>
                        <div class="timeline-container">
                            <div class="timeline-track"></div>
                            <div class="timeline-markers"></div>
                        </div>
                    </div>
                </div>
                <div class="control-panel">
                    <button onclick="startSceneDetection()">开始检测</button>
                    <button onclick="pauseSceneDetection()">暂停</button>
                    <button onclick="resumeSceneDetection()">继续</button>
                    <button onclick="downloadSceneResult()">下载结果</button>
                </div>
                <progress id="sceneProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
            </section>

            <section id="evaluation">
                <h2>图像/视频质量评价</h2>
                <p>通过智能算法对图像和视频的质量进行全方位评估。</p>
                <div class="upload-area" id="evaluationUploadArea">
                    <input type="file" id="evaluationInput" accept="image/*,video/*" hidden>
                    <label for="evaluationInput" class="upload-button">
                        <span>选择文件或拖拽到此处</span>
                        <small>支持图片/视频格式</small>
                    </label>
                    <progress id="evaluationUploadProgress" value="0" max="100" style="display:none;"></progress>
                </div>
                <div class="parameter-settings">
                    <label for="evaluationMethod">评价方法:</label>
                    <select id="evaluationMethod" name="evaluationMethod">
                        <option value="psnr">峰值信噪比(PSNR)</option>
                        <option value="ssim">结构相似度(SSIM)</option>
                        <option value="vqa">视频质量评估(VQA)</option>
                    </select>
                </div>
                <div class="preview-area">
                    <div class="original">
                        <h3>待评价文件</h3>
                        <div id="evaluationOriginalPreview"></div>
                    </div>
                    <div class="enhanced">
                        <h3>质量评分</h3>
                        <div id="evaluationResultPreview" class="evaluation-result">
                            <div class="score-card">
                                <div class="overall-score">
                                    <h4>总体评分</h4>
                                    <div class="score" id="overallScore">0</div>
                                </div>
                                <div class="detail-scores">
                                    <div class="score-item">
                                        <label>清晰度:</label>
                                        <span id="clarityScore">0</span>
                                    </div>
                                    <div class="score-item">
                                        <label>色彩还原:</label>
                                        <span id="colorScore">0</span>
                                    </div>
                                    <div class="score-item">
                                        <label>噪声水平:</label>
                                        <span id="noiseScore">0</span>
                                    </div>
                                    <div class="score-item">
                                        <label>压缩程度:</label>
                                        <span id="compressionScore">0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="evaluation-info">
                    <h3>评价详情</h3>
                    <div id="evaluationDetails">
                        <p>文件信息: <span id="fileInfo">-</span></p>
                        <p>评价方法: <span id="methodInfo">-</span></p>
                        <p>处理时间: <span id="processTime">0秒</span></p>
                    </div>
                </div>
                <div class="control-panel">
                    <button onclick="startEvaluation()">开始评价</button>
                    <button onclick="pauseEvaluation()">暂停</button>
                    <button onclick="resumeEvaluation()">继续</button>
                    <button onclick="downloadEvaluationReport()">下载报告</button>
                </div>
                <progress id="evaluationProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
            </section>
            
            <section id="superResolution">
                <h2>超分辨率重建</h2>
                <p>通过深度学习算法提升图像和视频的分辨率，实现细节增强。</p>
                <div class="upload-area" id="superResolutionUploadArea">
                    <input type="file" id="superResolutionInput" accept="image/*,video/*" hidden>
                    <label for="superResolutionInput" class="upload-button">
                        <span>选择文件或拖拽到此处</span>
                        <small>支持图片/视频格式</small>
                    </label>
                    <progress id="superResolutionUploadProgress" value="0" max="100" style="display:none;"></progress>
                </div>
                <div class="parameter-settings">
                    <label for="upscaleFactor">放大倍数:</label>
                    <select id="upscaleFactor" name="upscaleFactor">
                        <option value="2">2x</option>
                        <option value="4">4x</option>
                        <option value="8">8x</option>
                    </select>
                    <label for="quality">重建质量:</label>
                    <select id="quality" name="quality">
                        <option value="high">高质量（较慢）</option>
                        <option value="medium" selected>中等质量</option>
                        <option value="low">低质量（较快）</option>
                    </select>
                </div>
                <div class="preview-area">
                    <div class="original">
                        <h3>原始文件</h3>
                        <div id="superResolutionOriginalPreview"></div>
                        <div class="resolution-info">
                            <p>分辨率: <span id="originalResolution">-</span></p>
                            <p>文件大小: <span id="originalSize">-</span></p>
                        </div>
                    </div>
                    <div class="enhanced">
                        <h3>重建结果</h3>
                        <div id="superResolutionResultPreview"></div>
                        <div class="resolution-info">
                            <p>分辨率: <span id="enhancedResolution">-</span></p>
                            <p>文件大小: <span id="enhancedSize">-</span></p>
                        </div>
                    </div>
                </div>
                <div class="comparison-tool">
                    <h3>对比工具</h3>
                    <div class="comparison-view">
                        <div class="comparison-slider">
                            <div id="comparisonImage"></div>
                            <input type="range" id="comparisonRange" min="0" max="100" value="50">
                        </div>
                    </div>
                </div>
                <div class="control-panel">
                    <button onclick="startSuperResolution()">开始重建</button>
                    <button onclick="pauseSuperResolution()">暂停</button>
                    <button onclick="resumeSuperResolution()">继续</button>
                    <button onclick="downloadSuperResolutionResult()">下载结果</button>
                </div>
                <progress id="superResolutionProgress" value="0" max="100" style="width: 100%; display: none;"></progress>
            </section>
        </main>
    </div>
    <script src="scripts.js"></script>
</body>
</html> 